<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">我的简历</view>
		</view>
		<view class="main-content">
			<view class="actions">
				<button class="action-btn edit">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
						class="lucide lucide-pen-line-icon btn-icon">
						<path d="M12 20h9"></path>
						<path
							d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z">
						</path>
					</svg> 编辑简历
				</button>
				<button class="action-btn preview">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
						class="lucide lucide-eye-icon btn-icon">
						<path
							d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0">
						</path>
						<circle cx="12" cy="12" r="3"></circle>
					</svg> 预览PDF
				</button>
				<button class="action-btn download"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
						viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
						stroke-linejoin="round" class="lucide lucide-download-icon btn-icon">
						<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
						<polyline points="7 10 12 15 17 10"></polyline>
						<line x1="12" x2="12" y1="15" y2="3"></line>
					</svg> 下载简历
				</button>
			</view>
			<view class="resume-preview">
				<view class="section">
					<view class="section-title">基本信息</view>
					<view class="basic-info">
						<view class="info">
							<view class="name">张同学</view>
							<view class="info-items">
								<view class="info-item">
									<view>本科在读</view>
								</view>
								<view class="info-item">
									<view>杭州</view>
								</view>
								<view class="info-item">
									<view>zhangsan@example.com</view>
								</view>
								<view class="info-item">
									<view>138****1234</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">教育经历</view>
					<view class="education-list">
						<view class="education-item">
							<view class="edu-header">
								<view class="school">浙江大学</view>
								<view class="time">2021.09 - 2025.06</view>
							</view>
							<view class="major">计算机科学与技术 | 本科</view>
							<view class="gpa">GPA: 3.8/4.0</view>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">专业技能</view>
					<view class="skills">
						<view class="skill-item">JavaScript / TypeScript</view>
						<view class="skill-item">Vue.js / React.js</view>
						<view class="skill-item">Node.js / Express</view>
						<view class="skill-item">Python / Django</view>
						<view class="skill-item">MySQL / MongoDB</view>
						<view class="skill-item">Git / Linux</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">项目经历</view>
					<view class="project-list">
						<view class="project-item">
							<view class="project-header">
								<view class="project-name">互成一家 - 校园互助小程序</view>
								<view class="time">2023.10 - 至今</view>
							</view>
							<view class="project-role">前端开发负责人</view>
							<view class="project-points">
								<view>使用Vue 3和TypeScript开发微信小程序，实现互助学习和求职功能</view>
								<view>设计并实现了实时配对系统，提高学习效率和用户体验</view>
								<view>开发了简历管理和投递跟踪功能，帮助学生更好地管理求职进度</view>
								<view>项目上线一个月内，累计用户超过1000人，日活跃用户200+</view>
							</view>
						</view>
						<view class="project-item">
							<view class="project-header">
								<view class="project-name">校园二手交易平台</view>
								<view class="time">2023.03 - 2023.06</view>
							</view>
							<view class="project-role">全栈开发</view>
							<view class="project-points">
								<view>使用React和Node.js开发校园二手交易平台</view>
								<view>实现了商品发布、搜索、收藏、购物车等核心功能</view>
								<view>开发了实时聊天功能，方便买卖双方沟通</view>
								<view>项目获得校园创新创业大赛二等奖</view>
							</view>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">实习经历</view>
					<view class="internship-list">
						<view class="internship-item">
							<view class="intern-header">
								<view class="company">字节跳动</view>
								<span class="time">2023.07 - 2023.09</span>
							</view>
							<view class="position">前端开发实习生</view>
							<view class="intern-points">
								<view>参与抖音创作者平台的开发，负责数据可视化模块</view>
								<view>优化了大数据表格的渲染性能，提升加载速度50%</view>
								<view>开发了自定义图表组件，支持多种数据展示方式</view>
								<view>编写单元测试，测试覆盖率达到85%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dialog-overlay" show-footer="false" width="800px" v-show="showdialog">
			<view class="dialog">
				<view class="dialog-header">
					<h3 class="dialog-title">简历预览</h3><button class="close-btn"><svg
							xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
							fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="lucide lucide-xicon close-icon">
							<path d="M18 6 6 18"></path>
							<path d="m6 6 12 12"></path>
						</svg></button>
				</view>
				<view class="dialog-content">
					<view class="preview-dialog">
						<view  class="resume-preview">
							<section  class="section">
								<h2  class="section-title">基本信息</h2>
								<view  class="basic-info"><img 
										src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="张同学" class="avatar">
									<view  class="info">
										<h3  class="name">张同学</h3>
										<view  class="info-items">
											<view  class="info-item"><svg 
													xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
													stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													class="lucide lucide-graduation-cap-icon info-icon">
													<path
														d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z">
													</path>
													<path d="M22 10v6"></path>
													<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path>
												</svg><span >本科在读</span></view>
											<view  class="info-item"><svg 
													xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
													stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													class="lucide lucide-map-pin-icon info-icon">
													<path
														d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
													</path>
													<circle cx="12" cy="10" r="3"></circle>
												</svg><span >杭州</span></view>
											<view  class="info-item"><svg 
													xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
													stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													class="lucide lucide-mail-icon info-icon">
													<rect width="20" height="16" x="2" y="4" rx="2"></rect>
													<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
												</svg><span >zhangsan@example.com</span></view>
											<view  class="info-item"><svg 
													xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
													stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													class="lucide lucide-phone-icon info-icon">
													<path
														d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
													</path>
												</svg><span >138****1234</span></view>
										</view>
									</view>
								</view>
							</section>
							<section  class="section">
								<h2  class="section-title">教育经历</h2>
								<view  class="education-list">
									<view  class="education-item">
										<view  class="edu-header">
											<h3  class="school">浙江大学</h3><span  class="time">2021.09 -
												2025.06</span>
										</view>
										<p  class="major">计算机科学与技术 | 本科</p>
										<p  class="gpa">GPA: 3.8/4.0</p>
									</view>
								</view>
							</section>
							<section  class="section">
								<h2  class="section-title">专业技能</h2>
								<view  class="skills">
									<view class="skill-item">JavaScript / TypeScript</view>
									<view class="skill-item">Vue.js / React.js</view>
									<view class="skill-item">Node.js / Express</view>
									<view class="skill-item">Python / Django</view>
									<view class="skill-item">MySQL / MongoDB</view>
									<view class="skill-item">Git / Linux</view>
								</view>
							</section>
							<section class="section">
								<h2 class="section-title">项目经历</h2>
								<view class="project-list">
									<view class="project-item">
										<view class="project-header">
											<h3 class="project-name">互成一家 - 校园互助小程序</h3>
											<span class="time">2023.10 - 至今</span>
										</view>
										<text class="project-role">前端开发负责人</text>
										<view class="project-points">
											<view>使用Vue 3和TypeScript开发微信小程序，实现互助学习和求职功能</view>
											<view>设计并实现了实时配对系统，提高学习效率和用户体验</view>
											<view>开发了简历管理和投递跟踪功能，帮助学生更好地管理求职进度</view>
											<view>项目上线一个月内，累计用户超过1000人，日活跃用户200+</view>
										</view>
									</view>
									<view  class="project-item">
										<view  class="project-header">
											<text  class="project-name">校园二手交易平台</text>
											<text class="time">2023.03 - 2023.06</text>
										</view>
										<text class="project-role">全栈开发</text>
										<view class="project-points">
											<view>使用React和Node.js开发校园二手交易平台</view>
											<view>实现了商品发布、搜索、收藏、购物车等核心功能</view>
											<view>开发了实时聊天功能，方便买卖双方沟通</view>
											<view>项目获得校园创新创业大赛二等奖</view>
										</view>
									</view>
								</view>
							</section>
							<section class="section">
								<view class="section-title">实习经历</view>
								<view class="internship-list">
									<view class="internship-item">
										<view class="intern-header">
											<text class="company">字节跳动</text>
											<text class="time">2023.07 - 2023.09</text>
										</view>
										<text class="position">前端开发实习生</text>
										<view class="intern-points">
											<view>参与抖音创作者平台的开发，负责数据可视化模块</view>
											<view>优化了大数据表格的渲染性能，提升加载速度50%</view>
											<view>开发了自定义图表组件，支持多种数据展示方式</view>
											<view>编写单元测试，测试覆盖率达到85%</view>
										</view>
									</view>
								</view>
							</section>
						</view>
					</view>
				</view>
				<view class="dialog-footer">
					<button class="dialog-btn cancel">取消</button>
					<button class="dialog-btn confirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showdialog: false
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
	}
}
</script>

<style>
.resume-preview {
	background: #fff;
	border-radius: 3vmin;
	padding: 8vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.section {
	margin-bottom: 8vmin;
}

.section-title {
	font-size: 4.5vmin;
	font-weight: 600;
	color: #333;
	margin-bottom: 4vmin;
	padding-bottom: 2vmin;
	border-bottom: 0.5vmin solid #07C160;
}

.basic-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6vmin;
}

.info {
	flex: 1;
}

.name {
	font-size: 6vmin;
	font-weight: 600;
	color: #333;
	margin-bottom: 4vmin;
}

.info-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3vmin;
}

.info-item {
	display: flex;
	align-items: center;
	gap: 2vmin;
	color: #666;
	font-size: 4vmin;
}

.education-list {
	display: flex;
	flex-direction: column;
	gap: 5vmin;
}

.education-item {
	display: flex;
	flex-direction: column;
	gap: 1vmin;
}

.edu-header {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.school {
	font-size: 4vmin;
	font-weight: 500;
	color: #333;
}

.time,
.major,
.gpa {
	font-size: 3.5vmin;
	color: #666;
}

.skills {
	display: flex;
	flex-wrap: wrap;
	gap: 3vmin;
}

.skill-item {
	padding: 1.5vmin 3vmin;
	background: #f5f5f5;
	border-radius: 4vmin;
	font-size: 3.5vmin;
	color: #666;
}

.project-list {
	display: flex;
	flex-direction: column;
	gap: 6vmin;
}

.project-item {
	display: flex;
	flex-direction: column;
	gap: 2vmin;
}

.project-header {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-start;
	gap: 1vmin;
}

.project-name {
	font-size: 4vmin;
	font-weight: 500;
	color: #333;
}

.project-role {
	font-size: 3.5vmin;
	color: #666;
}

.project-points {
	margin: 0;
	padding-left: 5vmin;
}

.project-points>view {
	font-size: 3.5vmin;
	color: #666;
	line-height: 1.6;
	margin-bottom: 1vmin;
	position: relative;
}

.internship-list {
	display: flex;
	flex-direction: column;
	gap: 6vmin;
}

.internship-item {
	display: flex;
	flex-direction: column;
	gap: 2vmin;
}

.intern-header {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.company {
	font-size: 4vmin;
	font-weight: 500;
	color: #333;
}

.position {
	font-size: 3.5vmin;
	color: #666;
}

.intern-points {
	margin: 0;
	padding-left: 5vmin;
}

.intern-points>view {
	font-size: 3.5vmin;
	color: #666;
	line-height: 1.6;
	margin-bottom: 1vmin;
	position: relative;
}

.project-points>view::after,
.intern-points>view::after {
	--size: 2vmin;
	content: "";
	display: block;
	width: var(--size);
	height: var(--size);
	position: absolute;
	left: -5vmin;
	top: 1.75vmin;
	background-color: #000;
	border-radius: 50%;
}

.actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 3vmin;
	box-shadow: 0 -0.5vmin 2vmin #0000001a;
	z-index: 100;
	display: flex;
	gap: 3vmin;
}

.action-btn {
	display: flex;
	align-items: center;
	gap: 1.5vmin;
	padding: 2vmin 4vmin;
	border: none;
	border-radius: 2vmin;
	font-size: 3.5vmin;
	cursor: pointer;
	transition: all .2s ease;
}

.edit {
	background: #07c160;
	color: #fff;
}

.preview:hover {
	background: #f0f0f0;
}

.download {
	background: #1976d2;
	color: #fff;
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000080;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog {
    width: 90%;
    max-width: 320px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.dialog-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.close-btn {
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    transition: color .2s ease;
}

.dialog-content {
    padding: 20px;
}

.preview-dialog {
    max-height: 80vh;
    overflow-y: auto;
}

.resume-preview {
    padding: 20px;
    border-radius: 0;
	background: #fff;
	box-shadow: 0 2px 8px #0000000a;
}

.section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #07C160;
}

.basic-info {
    display: flex;
    gap: 24px;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.info {
    flex: 1;
}

.name {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.info-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.info-icon {
    width: 16px;
    height: 16px;
}

.education-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.education-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edu-header, .project-header, .intern-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.edu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.school {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.time, .major, .gpa {
    font-size: 14px;
    color: #666;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.skill-item {
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 16px;
    font-size: 14px;
    color: #666;
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.project-role {
    font-size: 14px;
    color: #666;
}

.project-points {
    margin: 0;
    padding-left: 20px;
}

/*自定义一个button标签*/
/* button { 
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
} */

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #07C160;
}

.internship-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.internship-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.position {
    font-size: 14px;
    color: #666;
}

.dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}
.dialog-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}
.dialog-btn.cancel {
    background: #f5f5f5;
    color: #666;
}
.dialog-btn.confirm {
    background: #07c160;
    color: #fff;
}
</style>
